<template>
	<!-- 销售统计 -->
	<div>
		<headpage username="销售统计" routername="main1"></headpage>
		<div class="foot">
			<ul class="list">
				<li>销售统计</li>
				<li>销售业绩</li>
			</ul>
		</div>
		<div class="main1">
			<ul class="list">
				<li>时间维度</li>
				<li>本日</li>
				<li>本周</li>
				<li>本月</li>
				<li>本年</li>
			</ul>
		</div>
		<div class="main2">
			<span>日期范围</span>
			<input type="date" class="form-control">
			到
			<input type="date" class="form-control">
		</div>
		<div class="main3">
			<ul class="list">
				<li>销售额:<span>$0</span></li>
				<li>销售笔数:<span>0笔</span></li>
			</ul>
		</div>
		<tabfixed></tabfixed>
	</div>
</template>

<script>
	import headpage from "../headpage.vue"
	import tabfixed from "../tabfixed.vue"
	export default {
		name: "sales_statistics",
		components: {
			tabfixed,
			headpage
		}
	}
</script>

<style scoped="scoped">
	ul,
	li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.list {
		display: flex;
		border-bottom: 1px solid lightblue;
	}

	.list li {
		width: 50%;
		margin: 5px;
		text-align: center;
	}

	.list li:hover {
		background-color: lightblue;
		color: white;
	}

	.foot ul li {
		margin-left: 30px;
		margin-right: 30px;
	}
	
	.main1 ul li{
		border-radius:999em;
	}
	.main1 ul li:nth-child(1){
		border:none;
		color:rgba(0,0,0,0.5);
		font-size:10px;
	}
	.main2 input{
		width:30%;
		display: inline-block;
	}
	.main2 span{
		font-size:10px;
		color:rgba(0,0,0,0.5);
	}
	
	.main3 span{
		font-size:10px;
		color:lightblue;
	}
</style>
